import React, { useState, useRef, useEffect } from "react";
import { Button, Input, Space, Card, Typography } from "antd";
import "@/tailwind-variables.less";

const { Title, Text } = Typography;

// usePrevious钩子实现
function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

export const UsePrevious: React.FC = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");
  const [selectedColor, setSelectedColor] = useState("blue");

  const previousCount = usePrevious(count);
  const previousText = usePrevious(text);
  const previousColor = usePrevious(selectedColor);

  const colors = ["blue", "red", "green", "purple", "orange"];

  return (
    <div className="flex justify-center flex-col items-center p-6">
      <Title level={2}>usePrevious 钩子演示</Title>
      <Text type="secondary" className="mb-6 text-center">
        这个钩子用于保存上一次的值，常用于比较前后状态变化
      </Text>

      <Space direction="vertical" size="large" className="w-full max-w-2xl">
        {/* 计数器演示 */}
        <Card title="计数器演示" className="w-full">
          <Space direction="vertical" className="w-full">
            <div className="text-center">
              <Space size="large">
                <Button
                  type="primary"
                  onClick={() => setCount(count + 1)}
                  size="large"
                >
                  增加
                </Button>
                <Button onClick={() => setCount(count - 1)} size="large">
                  减少
                </Button>
                <Button onClick={() => setCount(0)} size="large">
                  重置
                </Button>
              </Space>
            </div>
            <div className="bg-gray-50 p-4 rounded-md">
              <Text strong>当前值: </Text>
              <Text className="text-2xl text-blue-600">{count}</Text>
              <br />
              <Text strong>上一次的值: </Text>
              <Text className="text-xl text-gray-500">
                {previousCount !== undefined ? previousCount : "无"}
              </Text>
              <br />
              <Text strong>变化: </Text>
              <Text
                className={`text-lg ${
                  previousCount !== undefined && count > previousCount
                    ? "text-green-600"
                    : previousCount !== undefined && count < previousCount
                    ? "text-red-600"
                    : "text-gray-500"
                }`}
              >
                {previousCount !== undefined
                  ? count > previousCount
                    ? `+${count - previousCount}`
                    : count < previousCount
                    ? `${count - previousCount}`
                    : "无变化"
                  : "首次设置"}
              </Text>
            </div>
          </Space>
        </Card>

        {/* 文本输入演示 */}
        <Card title="文本输入演示" className="w-full">
          <Space direction="vertical" className="w-full">
            <Input
              placeholder="请输入一些文字..."
              value={text}
              onChange={(e) => setText(e.target.value)}
              size="large"
            />
            <div className="bg-gray-50 p-4 rounded-md">
              <Text strong>当前输入: </Text>
              <Text className="text-blue-600">&quot;{text}&quot;</Text>
              <br />
              <Text strong>上一次输入: </Text>
              <Text className="text-gray-500">
                &quot;{previousText !== undefined ? previousText : "无"}&quot;
              </Text>
              <br />
              <Text strong>内容变化: </Text>
              <Text
                className={
                  previousText !== text ? "text-orange-600" : "text-gray-500"
                }
              >
                {previousText !== text ? "已改变" : "无变化"}
              </Text>
            </div>
          </Space>
        </Card>

        {/* 颜色选择演示 */}
        <Card title="颜色选择演示" className="w-full">
          <Space direction="vertical" className="w-full">
            <div className="flex gap-2 justify-center">
              {colors.map((color) => (
                <Button
                  key={color}
                  style={{
                    backgroundColor: color,
                    borderColor: color,
                    color: "white",
                  }}
                  onClick={() => setSelectedColor(color)}
                  size="large"
                  type={selectedColor === color ? "primary" : "default"}
                >
                  {color}
                </Button>
              ))}
            </div>
            <div className="bg-gray-50 p-4 rounded-md">
              <div className="flex items-center gap-4 mb-2">
                <Text strong>当前颜色: </Text>
                <div
                  className="w-8 h-8 rounded border-2 border-gray-300"
                  style={{ backgroundColor: selectedColor }}
                ></div>
                <Text className="text-blue-600">{selectedColor}</Text>
              </div>
              <div className="flex items-center gap-4">
                <Text strong>上一次颜色: </Text>
                <div
                  className="w-8 h-8 rounded border-2 border-gray-300"
                  style={{
                    backgroundColor: previousColor || "transparent",
                    border: !previousColor
                      ? "2px dashed #ccc"
                      : "2px solid #ccc",
                  }}
                ></div>
                <Text className="text-gray-500">{previousColor || "无"}</Text>
              </div>
            </div>
          </Space>
        </Card>

        {/* 钩子代码展示 */}
        <Card title="usePrevious 钩子实现" className="w-full">
          <pre className="bg-gray-900 text-green-400 p-4 rounded-md overflow-x-auto text-sm">
            {`function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}`}
          </pre>
          <div className="mt-4">
            <Text type="secondary">
              这个钩子通过 useRef 保存上一次的值，在每次渲染后通过 useEffect
              更新保存的值。 由于 useEffect
              在渲染完成后执行，所以返回的始终是上一次的值。
            </Text>
          </div>
        </Card>
      </Space>
    </div>
  );
};
